<template>
  <div class="carousel">
<!--    <h1 style="color: white">carousel</h1>-->
        <el-carousel :interval="5000" arrow="always" height="250px">
          <el-carousel-item v-for="photo in photoUrl" :key="photo">
            <el-image :src="photo" fit="contain"/>
          </el-carousel-item>
        </el-carousel>
      </div>
</template>

<script setup lang="ts">

const photoUrl = ['./img/p1.png','./img/p2.png','./img/p3.png'];
</script>


<style scoped>

.left {
  flex: 1;
}

.right {
  flex: 1;
}

.el-carousel {
  width: 500px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
